<template>
  <div class="my_contain">
    <div style="width:100%;height:100%;" ref="line"></div></div>
</template>

<script>
export default {
  name: 'MimiUdiskInfo',
  data() {
    return {
    }
  },
  created() {
  },
  mounted() {
    this.drawLine()
  },
  methods: {
    drawLine(){ // U盘使用频率折线图
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.line)
      var nodes = [{
          name: '服务器',
          x: '5',
          y: '5',
          img: 'ava.png',
          alarm: '产生告警了哦',
          state: 1
        },
        {
          x: '3',
          y: '0',
          name: '存储设备1',
          img: '20210206152021.png',
          state: 1
        },
        {
          x: '7',
          y: '0',
          name: '存储设备2',
          img: '20210206152021.png',
          state: 0
        },
        {
          x: '0',
          y: '10',
          name: '防火墙',
          img: '20210118113931.png',
          state: 1
        },
        {
          x: '5',
          y: '10',
          name: '网络设备1',
          img: '20201209100300.png',
          alarm: '产生告警了哦',
          state: 0
        },
        {
          x: '12',
          y: '12',
          name: '网络设备2',
          img: '20201209100300.png',
          state: 1
        }
      ]
      var links = [{
          source: '存储设备2',
          target: '存储设备1',
          name: '数据传输'
        }, {
          source: '存储设备1',
          target: '服务器',
          name: '数据传输'
        },
        {
          source: '服务器',
          target: '防火墙',
          name: '访问'
        },
        {
          source: '防火墙',
          target: '网络设备1',
          name: '访问'
        },
        {
          source: '网络设备1',
          target: '网络设备2',
          name: '访问'
        }
      ]
      var charts = {
        nodes: [],
        links: [],
        linesData: []
      }
      var dataMap = new Map()
      for (var j = 0; j < nodes.length; j++) {
        var x = parseInt(nodes[j].x)
        var y = parseInt(nodes[j].y)
        var node = {
          name: nodes[j].name,
          value: [x, y],
          symbolSize: 50,
          alarm: nodes[j].alarm,
          symbol: 'image://https://gitee.com/dulily/cdn/raw/master/img/' + nodes[j].img,
          itemStyle: {
            normal: {
              color: '#12b5d0'
            }
          }
        }
        dataMap.set(nodes[j].name, [x, y])
        charts.nodes.push(node)
      }
      for (var i = 0; i < links.length; i++) {
        var link = {
          source: links[i].source,
          target: links[i].target,
          label: {
            normal: {
              show: true,
              formatter: links[i].name
            }
          },
          lineStyle: {
            normal: {
              color: '#00FFFF'
            }
          }
        }
        charts.links.push(link)
        // 组装动态移动的效果数据
        var lines = [{
          coord: dataMap.get(links[i].source)
        }, {
          coord: dataMap.get(links[i].target)
        }]
        charts.linesData.push(lines)
      }
      let option = {
        tooltip: {
          trigger: 'item'
        },
        title: {
          text: '网络拓扑图',
          textStyle: {
            fontWeight: 'normal',
            color: "#00FFFF",
          }
        },
        backgroundColor: "#1b2735",
        xAxis: {
          show: false,
          type: 'value'
        },
        yAxis: {
          show: false,
          type: 'value'
        },
        series: [
          {
            type: 'graph',
            layout: 'none',
            coordinateSystem: 'cartesian2d',
            symbolSize: 50,
            label: { // 节点标签的样式
              normal: {
                show: true,
                position: 'bottom',
                color: '#00FFFF'
              }
            },
            lineStyle: {
              normal: {
                width: 2,
                shadowColor: 'none'
              }
            },
            edgeSymbolSize: 8,
            data: charts.nodes,
            links: charts.links,
            itemStyle: { // 节点样式
              normal: {
                label: { // 节点标签的样式
                  show: true,
                  formatter: function(item) {
                    return item.data.name
                  }
                }
              }
            },
            emphasis: { // 节点的高亮状态
              itemStyle: {
                color: 'yellow'
              },
              // label: {
              //   color: 'yellow'
              // }
            },
            roam: 'scale', // 无效
            zoom: 3, // 无效
          }, 
          {
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            effect: {
              show: true,
              trailLength: 0,
              symbol: 'arrow',
              color: '#00FFFF',
              symbolSize: 8
            },
            data: charts.linesData
          }
        ]
      };
      // 用于告警的动态效果
      setInterval(() => {
        var dataI = []
        for (var n = 0; n < nodes.length; n++) {
          var alarm = nodes[n].alarm
          if (alarm !== null && alarm !== '' && alarm !== undefined) {
            option.series[0].data[n].symbolSize = 60
            option.series[0].data[n].label = {
              normal: {
                color: '#DC143C'
              }
            }
            option.series[0].itemStyle.normal.label.formatter = function(item) {
              if (item.data.alarm !== undefined) {
                return item.data.name + '\n[ ' + item.data.alarm + ' ]'
              } else {
                return item.data.name
              }
            }
            dataI.push(n)
          }
        }
        myChart.setOption(option)
        setTimeout(() => {
          for (var m = 0; m < dataI.length; m++) {
            option.series[0].data[dataI[m]].symbolSize = 50
            option.series[0].data[dataI[m]].label = {
              normal: {
                color: '#00FFFF'
              }
            }
            option.series[0].itemStyle.normal.label.formatter = function(item) {
              return item.data.name
            }
          }
          myChart.setOption(option)
        }, 500)
      }, 1000)
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-date-editor--datetimerange.el-input__inner {
  width: 350px;
}
ul, li {
  margin: 0;
}
.my_contain {
  height: 500px;
  background-color: #f0f0f0;
  .row-time {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
    .col-time {
      line-height: 32px;
      span {
        padding: 5px;
      }
      .time-link {
        cursor: pointer;
      }
    }
  }
  .row-chart {
    height: auto;
    margin-bottom: 15px;
    .col-chart-two {
      background-color: #fff;
      height: 400px;
      box-sizing: border-box;
      .col-chart-title-two {
        width: 100%;
        padding: 8px 10px;
        color: #fff;
        background-color: #c7c7c7;
        box-sizing: border-box;
      }
      .col-chart-main-two {
        width: 100%;
        height: calc(100% - 37px);
        box-sizing: border-box;
        padding: 15px;
      }
    }
    .col-chart {
      background-color: #fff;
      height: 400px;
      box-sizing: border-box;
      .col-chart-title {
        width: 100%;
        padding: 8px 10px;
        color: #fff;
        background-color: #c7c7c7;
        box-sizing: border-box;
      }
      .col-chart-main {
        width: 100%;
        height: calc(100% - 37px);
        box-sizing: border-box;
        padding: 15px;
        .seamless-warp {
          height: 333px;
          overflow: hidden;
          li {
            line-height: 37px;
          }
        }
      }
    }
  }
}
.row-div {
  margin-bottom: 15px;
}
</style>